<template>
	<div class="operLog-page">
		<!--查询表单-->
		<el-card class="box-card mb10" shadow="never">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="75px" :model="searchForm">
				<el-row :gutter="30" justify="start">
					<el-col :span="6">
						<el-form-item class="form-item" label="关键词:" prop="searchVal">
							<el-input v-model="searchForm.searchVal" placeholder="请输入关键词" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="任务类型:" prop="taskType">
							<el-select v-model="searchForm.taskType" class="el-form-item" clearable placeholder="请选择任务类型">
								<el-option label="主机漏洞扫描" value="1" />
								<el-option label="WEB漏洞扫描" value="2" />
								<el-option label="敏感词检测" value="3" />
								<el-option label="挂马检测" value="4" />
								<el-option label="DNS解析" value="5" />
								<el-option label="防篡改检测" value="6" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="任务日期:" prop="createTimeAry">
							<el-date-picker v-model="createTimeAry" value-format="YYYY-MM-DD" class="el-form-item" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="daterange" />
						</el-form-item>
					</el-col>
					<template v-if="!searchMore">
						<el-col :span="6">
							<el-form-item class="form-item" label="任务状态:" prop="curTaskStatus">
								<el-select v-model="searchForm.curTaskStatus" class="el-form-item" clearable placeholder="请选择任务状态">
									<el-option label="待执行" value="1" />
									<el-option label="执行中" value="2" />
									<el-option label="已完成" value="3" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<a class="more-search" @click="searchMore = searchMore ? false : true">
								{{ searchMore ? '展开' : '收起' }}
								<el-icon>
									<component :is="searchMore ? 'ele-ArrowDown' : 'ele-ArrowUp'" color="#0052CC" />
								</el-icon>
							</a>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<!-- 响应参数 -->
		<el-card class="box-card" shadow="never">
			<static-table :tableData="tableData" :loading="loading" :seqConfig="{ startIndex: (pageNum - 1) * pageSize }">
				<template #vux-column>
					<vxe-column type="seq" title="序号" width="60" />
					<vxe-column field="id" min-width="120" show-overflow="tooltip" title="任务ID" />
					<vxe-column field="taskType" min-width="120" title="任务类型">
						<template #default="{ row }">
							<span v-if="row.taskType == 1">主机漏洞扫描</span>
							<span v-if="row.taskType == 2">WEB漏洞扫描</span>
							<span v-if="row.taskType == 3">敏感词检测</span>
							<span v-if="row.taskType == 4">挂马检测</span>
							<span v-if="row.taskType == 5">DNS解析</span>
							<span v-if="row.taskType == 6">防篡改检测</span>
						</template>
					</vxe-column>
					<vxe-column field="scanTarget" min-width="120" show-overflow="tooltip" title="扫描目标资产" />
					<vxe-column field="paramBody" min-width="120" show-overflow="tooltip" title="参数报文" />
					<vxe-column field="curTaskStatus" min-width="120" title="任务状态">
						<template #default="{ row }">
							<span v-if="row.curTaskStatus == 1">待执行</span>
							<span v-if="row.curTaskStatus == 2">执行中</span>
							<span v-if="row.curTaskStatus == 3">已完成</span>
						</template>
					</vxe-column>
					<vxe-column field="createTime" min-width="150" show-overflow="tooltip" title="创建时间" />
				</template>
			</static-table>
			<el-pagination background :current-page="pageNum" :layout="layout" :page-size="pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</el-card>
	</div>
</template>
<script name="taskLog" setup>
import useTableList from '@/hooks/useTableList'
const state = reactive({
	searchForm: {
		searchVal: '',
		taskType: '',
		curTaskStatus: '',
		startTime: '',
		endTime: '',
	},
	createTimeAry: [],
	searchFormRef: null,
	selectionAry: [],
})
const queryUrl = '/sop-risk-monitor/failScanTaskLog/pageList'
const { searchForm, searchFormRef, createTimeAry } = toRefs(state)
const { searchMore, loading, dataCount, handleInitQuery, getTimeParseAry, tableData, pageNum, pageSize, layout, handleSizeChange, handleCurrentChange } = useTableList(queryUrl, state.searchForm)
const handleSearch = () => {
	const { beginTime, endTime } = getTimeParseAry(state.createTimeAry)
	state.searchForm.startTime = beginTime
	state.searchForm.endTime = endTime
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	state.createTimeAry = []
	handleSearch()
}
</script>
<style lang="scss" scoped></style>
